<script setup>

</script>

<template>
  <div class="first-page">
    <img src="@/assets/pictures/first.jpg" class="firstP" alt="first">
    <div class="firstT-wrapper">
      <h2 class="firstT">{{ $t("slogan") }}</h2>
    </div>
  </div>
</template>

<style scope>
.first-page {
  position: relative;
}

.firstP {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
  filter: var(--image-filter) blur(0.1px);
  transition: filter 0.5s ease-in-out;
}

.firstT-wrapper {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 0 1px black);
}

.firstT {
  font-size: 3.4rem;
  font-weight: bold;
  color: transparent;
  background-image: linear-gradient(90deg,
      #FFF 40%,
      #f73104 50%,
      #FFF 60%);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: colorFlow 4s linear infinite;
}

@keyframes colorFlow {
  0% {
    background-position: 100%;
  }

  100% {
    background-position: -100%;
  }
}
</style>